<template>
    <ul class="tdwhBox">
        <li class="item">
            <p>{{framStore.weacherFarmItem.textDay}}</p>
            <p>{{framStore.weacherFarmItem.tempMin}}/{{framStore.weacherFarmItem.tempMax}} °C</p>
        </li>
        <li class="item">
            <p>灾害预警</p>
            <p class="yj">
                <template v-if="framStore.weacherFarmItem.warning">
                    <span v-for="dt in JSON.parse(framStore.weacherFarmItem.warning)" :style="'background-color: '+dt.severityColor" :key="dt.id">
                        {{dt.typeName}}
                    </span>
                </template>
                <template v-else>无</template>
                <!-- <span>大风</span><span style="background-color: red;">高温</span> -->
            </p>
        </li>
        <li class="item">
            <p>降雨量</p>
            <p>{{framStore.weacherFarmItem.precip}}mm</p>
        </li>
        <li class="item">
            <p>通知</p>
            <p>无</p>
        </li>
    </ul>
</template>
<script setup>
import {ref} from "vue"
import { useFramStore } from '@/pinia/modules/farm'
const framStore = useFramStore()
</script>

<style lang="scss" scoped>
.tdwhBox{
    display: flex;
    list-style: none;
    padding: 10px 0 20px 0;
    margin: 0;
    li{
        text-align: center;
        line-height: 24px;
        border: 1px solid #eef0ef;
        padding: 10px 0;
        background-color: #f8f9f9;
        &+li{
            margin-left: 10px;
        }
        &.item{
            flex: 1; 
        }
        .yj{
            display: flex;
            justify-content: center;
            span{
                padding: 0 5px;
                //background-color: #037b27;
                color: #fff;
                height: 20px;
                line-height: 20px;
                margin: 0 2px 0 0;
            }
        }
    }
}
</style>